<template>
	<view class="container">
		<view class="item" v-for="(item, index) in listData" :key="index">
			<view class="box">
				<view class="warp" style="margin-bottom: 10rpx; justify-items: flex-end">
					<view class="left" style="width: 88%">
						<view class="head">
							<view>
								<image :src="item.reff_user.avatar" style="width: 90rpx; height: 90rpx; border-radius: 50%"></image>
							</view>
							<view style="margin-left: 20rpx">
								<view class="text1">
									{{ item.reff_user.name }}
								</view>
								<view class="text2">
									{{ item.reff_user.mobile }}
								</view>
							</view>
						</view>
					</view>
					<view class="right" style="width: 10%">
						<view class="btn" @click="handereason(item)">审核</view>
					</view>
				</view>

				<view class="warp info">
					<view class="left infoText">推荐人身份:{{ item.reff_user.identity_name }}</view>
					<view class="right infoText">推荐日期:{{ item.createtime }}</view>
				</view>
				<view class="warp info">
					<view class="left infoText">提交人:{{ item.sub_user.name }}</view>
					<view class="right infoText"></view>
				</view>
			</view>
		</view>
		<uni-popup ref="reason" type="bottom">
			<scroll-view class="reason" scroll-y="true" style="padding-top: 26rpx; width: 100%; height: 80vh; background: #ffffff; border-radius: 32rpx 32rpx 0px 0px">
				<view class="box">
					<view class="boxText">
						<view class="boxTitle">推荐人信息</view>
						<view class="boxwarp">
							<view class="left">{{ selectItem.reff_user.name }}（{{ selectItem.reff_user.identity_name }}）</view>
							<view class="right">
								{{ selectItem.reff_user.mobile }}
							</view>
						</view>
						<view class="boxwarp">
							<view class="left">推荐日期</view>
							<view class="right">
								{{ selectItem.createtime }}
							</view>
						</view>
						<view class="boxwarp">
							<view class="left">推荐订单</view>
							<view class="right" @click="gotoOrderInfo">
								{{ selectItem.order_info.order_no }}
								<uni-icons type="right" size="15" color="#C78E4B"></uni-icons>
							</view>
						</view>
						<view class="boxwarp">
							<view class="left">推荐返利</view>
							<view class="right">{{ selectItem.rebeat }}元</view>
						</view>
					</view>
				</view>
				<view class="box">
					<view class="boxText">
						<view class="boxTitle">购买人信息</view>
						<view class="boxwarp">
							<view class="left">
								{{ selectItem.buy_user.name || selectItem.buy_user.nickname }}
							</view>
							<view class="right"></view>
						</view>
						<view class="boxwarp">
							<view class="left" style="width: 20%">商品信息</view>
							<view class="right" style="width: 80%; text-align: right; display: flex">
								<view class="text-overflow1" style="width: 95%">
									{{ selectItem.order_goods_info.title }}
								</view>
								<view style="width: 4%">x{{ selectItem.order_goods_info.number }}</view>
							</view>
						</view>
						<view class="boxwarp">
							<view class="left">商品总额</view>
							<view class="right">{{ selectItem.order_goods_info.price }}元</view>
						</view>
					</view>
				</view>
				<view class="box">
					<view class="boxText">
						<view class="boxwarp">
							<view class="left">提交人</view>
							<view class="right">
								{{ selectItem.sub_user.name }}
							</view>
						</view>
					</view>
					<view class="flex">
						<view class="" style="width: 24rpx"></view>
						<view class="flex-1 flex align-center .scrollnobar" style="overflow-x: scroll; margin-top: 20rpx">
							<view v-for="(img, index) in selectItem.img_list" :key="index" class="flex flex-column align-center" style="margin-right: 24rpx">
								<view class="" @click="previewImg(index)" style="font-size: 0">
									<image style="width: 222rpx; height: 166rpx; background: #f2f2f2; border-radius: 8rpx" :src="img" mode=""></image>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="btn">
					<view class="btn1 b1" @click="handeOperate(0)">拒绝</view>
					<view class="btn1 b2" @click="handeOperate(1)">同意</view>
				</view>
			</scroll-view>
		</uni-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			listData: [],
			shopId: 0,
			selectItem: {}
		};
	},
	onLoad(option) {
		this.shopId = option.shopId;
		this.getList();
	},
	methods: {
		//预览图片
		previewImg(index) {
			console.log(index);
			console.log(this.selectItem.img_list);
			// 预览图片
			uni.previewImage({
				urls: this.selectItem.img_list,
				current: index
			});
		},
		getList() {
			this.$request({
				url: 'shop/get_recomm_list',
				method: 'POST',
				data: {
					shop_id: this.shopId
				}
			}).then((res) => {
				if (res.statusCode == 200) {
					this.listData = res.data.data;
				}
			});
		},
		handereason(item) {
			this.selectItem = item;
			this.$refs.reason.open();
		},
		handeOperate(e) {
			let that = this;
			uni.showModal({
				title: `确定要${e == 0 ? '拒绝' : '同意'}吗？`,
				success(res) {
					if (res.confirm) {
						that
							.$request({
								url: 'shop/sub_order_remmon',
								method: 'POST',
								data: {
									id: that.selectItem.id,
									status: e
								}
							})
							.then((res) => {
								if (res.data.code == 0) {
									uni.showModal({
										title: '提示',
										content: res.data.msg,
										showCancel: false,
										success: function (res) {
											if (res.confirm) {
												uni.navigateBack();
											}
										}
									});
								} else {
									uni.showToast({
										title: res.data.msg,
										icon: 'error'
									})
									that.getList();
									that.$refs.reason.close()
								}
							});
					}
				}
			});
		},
		gotoOrderInfo() {
			let data = {
				id: this.selectItem.order_info.id
			};
			if (this.selectItem.order_info.order_type == 'package') {
				this.selectItem.order_info.is_mange = 1;
				uni.navigateTo({
					url: '/pages/schedule/weddingDressOrderDetails?orderInfo=' + encodeURIComponent(JSON.stringify(this.selectItem.order_info))
				});
				return;
			}
			uni.navigateTo({
				url: `/pages/filePages/storeDetails/storeDetails?data=${JSON.stringify(data)}&state=1`
			});
		}
	}
};
</script>

<style lang="scss">
.container {
	width: 100%;
	background-color: #ffffff;
}

page {
	background-color: rgba(244, 245, 249, 1);
}

.item {
	width: 100%;
	padding-top: 30rpx;
	border-top: 2px solid rgba(244, 245, 249, 1);
	padding-bottom: 20rpx;

	.box {
		width: 94%;
		margin: 0 auto;

		.head {
			display: flex;

			.text1 {
				font-family: AppleSystemUIFont;
				font-size: 30rpx;
				color: #333333;
				line-height: 36rpx;
			}

			.text2 {
				padding-top: 13rpx;
				font-family: AppleSystemUIFont;
				font-size: 26rpx;
				color: #999999;
				line-height: 32rpx;
			}
		}

		.shje {
			color: rgba(153, 153, 153, 1);
			font-size: 30rpx;
		}

		.btn {
			width: 92rpx;
			height: 52rpx;
			border-radius: 8rpx;
			background: linear-gradient(154.46deg, rgba(228, 183, 127, 1) 0%, rgba(205, 156, 97, 1) 100%);
			color: #fff;
			font-size: 24rpx;
			text-align: center;
			line-height: 52rpx;
		}

		.info {
			margin-top: 20rpx;

			.infoText {
				color: rgba(153, 153, 153, 1);
				font-size: 24rpx;
			}
		}

		.warp {
			width: 100%;
			display: flex;

			.left {
				width: 50%;
			}

			.right {
				width: 50%;
				text-align: right;
			}
		}
	}
}

.reason {
	.box {
		width: 600rpx;
		padding: 36rpx;
		border: 1px solid #eee;
		border-radius: 16rpx;
		margin: 0 auto;
		margin-top: 40rpx;
	}

	.boxText {
		width: 100%;
	}

	.boxTitle {
		color: #333;
		font-size: 28rpx;
		font-weight: 600;
		padding-bottom: 28rpx;
	}

	.boxwarp {
		display: flex;
		justify-content: space-between;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #555555;
		line-height: 40rpx;
		margin-top: 20rpx;
	}

	.btn {
		width: 572rpx;
		margin: 0 auto;
		display: flex;
		margin-top: 54rpx;
		padding-bottom: 28rpx;
		.btn1 {
			width: 260rpx;
			height: 74rpx;
			border-radius: 37rpx;
			text-align: center;
			line-height: 74rpx;
		}

		.b1 {
			border: 1px solid #ebbe87;
			color: #ebbe87;
			background-color: #ffffff;
		}

		.b2 {
			margin-left: 24rpx;
			background-color: #ebbe87;
			border: 1px solid #ebbe87;
			color: #fff;
		}
	}
}
</style>
